import React from 'react';
import { connect } from 'dva';
import './IndexPage.css';
import { Layout, Badge, Icon, message , Menu, Dropdown} from 'antd';
import SiderMenu from '../components/menu';
import Center from '../components/center';
import Sideslip from '../components/Sideslip/Sideslip';
import {loginOut, getMenu,getUserInfo} from '../services/api';
import { parse } from 'path';


const { Header, Sider, Content } = Layout;


class IndexPage extends React.Component {

  state = {
    menuList :[],
    userInfo:'',
   
  }
  componentDidMount() {
    window.addEventListener('resize', this.handleSize);
    this.props.history.push(`/${sessionStorage.getItem('fAddress')}`);
    this.props.dispatch({type: 'example/setAreaInfo'});
    this.props.dispatch({type: 'example/setServiceType'});
    this.props.dispatch({type: 'example/setGender'});
    this.props.dispatch({type: 'example/setServicePersons'});
    this.getMenu();
    this.getUserInfo();
  }  
  handleSize = () => {
    this.props.dispatch({type: 'example/setSize', res: {width: document.body.clientWidth,height: document.body.clientHeight}});
  }

  //获取用户名
  async getUserInfo(){
    const response = await getUserInfo();
    if(response.code === 200){
       this.setState({
         userInfo:response.data.fUserName
       },()=>{

       })
    } else {
      response.msg && message.error(response.msg)
    }
  }

  //退出登录
  async out(){
    const response = await loginOut();
    if(response.code === 200){
        sessionStorage.clear();
        this.props.history.push('/');
    } else {
      response.msg && message.error(response.msg)
    }
  }

  async getMenu(){
    const response = await getMenu();
    if(response.code === 200){
       this.setState({
         menuList:response.data
       })
       if(!sessionStorage.getItem('fAddress')) {
        this.props.history.push(this.state.menuList[0].fAddress)
       }
    } else {
      response.msg && message.error(response.msg);
    }
  }

  render() {
    const menu = (
      <Menu onClick={()=>{this.out()}} >
        <Menu.Item key="3" ><Icon type="logout" />退出登录</Menu.Item>
      </Menu>
    );
    return(
      <div style={{width: '100%', height: '100%'}}>
      <Layout style={{height: 'inherit'}}>
        <Sider style={{backgroundColor: '#fff', height: 'inherit'}}>
          <SiderMenu history={this.props.history} menuList={this.state.menuList}/>
        </Sider>
        <Layout>
          <Header style={{backgroundColor: '#fff'}} className='topdiv'>
            <span className='system_name'>欢迎进入助友家政管理系统</span>
            <div style={{width: 210}} className="manage">
              {/* <Badge count={5}>
                <Icon type="notification" />
              </Badge>  */}
              <Dropdown overlay={menu} trigger={['click']}>
                <a className="ant-dropdown-link"  style={{marginLeft: 20, fontSize: 16}}>
                 {this.state.userInfo} <Icon type="down" />
                </a>
              </Dropdown>
            </div>
          </Header>
          <Content style={{width: 'calc(100vW - 200px)',height: 'inherit'}}>
            <Center/>
          </Content>
        </Layout>
      </Layout>
      <Sideslip/>
      </div>
    );
  }
}

export default connect()(IndexPage);
